<template>
  <div class="flex direction-column height-100">
    <div class="search-form">
      <el-form inline>
        <el-form-item label="月份选择">
          <el-date-picker
            type="monthrange" v-model="monthrange"
            range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份"
            format="yyyy-MM" value-format="yyyy-MM"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="所属区域">
          <el-select v-model="area">
            <el-option
              v-for="option in districts" :key="option.code"
              :label="option.name" :value="option.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="onSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      v-loading="loading" class="table"
      :data="lists" height="100%"
      :header-cell-style="{
        backgroundColor: themeColor,
        color: 'white'
      }"
    >
      <el-table-column v-for="column in columns" :key="column.prop" v-bind="column"></el-table-column>
    </el-table>
    <el-pagination
      class="pagination" layout="total,prev,pager,next"
      hide-on-single-page background
      :current-page.sync="pagination.pageNumber" :page-size="pagination.pageSize"
      :total="pagination.total"
      @current-page="getLists"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  name: 'energy-efficiency-analysis-consumption-rank',
  data () {
    const end = this.$dayjs().format('YYYY-MM')
    const start = this.$dayjs().subtract(1, 'year').format('YYYY-MM')
    return {
      monthrange: [start, end],
      area: '',
      loading: false,
      lists: [],
      columns: [
        { label: '排名', prop: 'id' },
        { label: '地区', prop: 'col1' },
        { label: '综合能源消费量（万吨标准煤）', prop: 'col3' },
        { label: '用煤量（万吨标准煤）', prop: 'col4' },
        { label: '用电量（万吨标准煤）', prop: 'col5' },
        { label: '原油用量（万吨标准煤）', prop: 'col6' },
        { label: '天然气（万立方米）', prop: 'col7' },
        { label: '能源消费总量（万吨标准煤）', prop: 'col8' },
      ],
      pagination: {
        pageNumber: 1,
        pageSize: 13,
        total: 0
      }
    }
  },
  computed: {
    themeColor () {
      return this.$store.state.user.theme
    },
    qs () {
      const monthrange = this.monthrange
      return {
        start: monthrange[0],
        end: monthrange[1],
        area: this.area
      }
    },
    districts () {
      return this.$store.getters['user/districts']
    },
  },
  mounted () {
    this.getLists()
  },
  methods: {
    getLists () {
      this.loading = true
      // TODO
      return new Promise((resolve) => {
        this.loading = false
        resolve()
        this.lists = [
          {
            id: 1,
            col1: '东湖区',
            col2: '23.22',
            col3: '429.2',
            col4: '1902.2',
            col5: '564.2',
            col6: '2323.12',
            col7: '1224.3',
            col8: '3542.2'
          }
        ]
      })
    },
    onSearch () {
      this.pagination.pageNumber = 1
      this.$nextTick(() => {
        this.getLists()
      })
    },
  }
}
</script>

<style scoped>

</style>
